<template>
    <el-collapse-item name="1">
        <template #title>
            <h2> IO 配置 </h2>
        </template>
        <el-descriptions :column="1" border>
            <ElDescriptionsItem v-for="item in io_configs" :key="item.label">
                <template #label>
                    <div class="io_config_label">
                        {{ item.label }}
                        <el-tooltip placement="left" :content="item.data.enable ? '点击关闭' : '点击开启'">
                            <el-button circle size='small' :type="item.data.enable ? 'success' : 'info'"
                                @click="item.data.enable = !item.data.enable" />
                        </el-tooltip>
                    </div>
                </template>
                <div v-if="item.data.enable">
                    <div v-for="(data, key) in item.data" :key="key">
                        <!-- {{ key }}{{ data }} -->
                        <io_select v-if="Array.isArray(data) && typeof data[0] == 'number'" :label='item.label'
                            v-model:io_config="item.data[key]" :max="io_max" :selected="io_selected"
                            :del="(id: Number) => { item.data.gpio.splice(id, 1) }" :add="true"
                            @click="item.data.gpio.push(-1)" />
                        <el-row v-if="Array.isArray(data) && typeof data[0] == 'boolean'" :gutter="20">
                            <el-col :span="7" :offset="1" v-for="(value, index) in data" :key="key + '-' + index">
                                <span>{{ key.toUpperCase() }}{{ index }}</span>
                                <el-button circle size='small' :type="value ? 'success' : 'info'" style="margin-left: 5px;"
                                    @click="data[index] = !data[index]" />
                            </el-col>
                        </el-row>
                        <div v-if="typeof data == 'number'" class="io_config_input">
                            <el-tag type="success" size="large" disable-transitions>
                                {{ key }}
                            </el-tag>
                            <el-input-number v-model="item.data[key]" :min="0" :max="32768" :step="10"
                                :value-on-clear="0" />
                        </div>
                        <el-row v-if="typeof data == 'boolean' && key.toUpperCase() != 'ENABLE'" :gutter="20">
                            <el-col :span="7" :offset="1">
                                <span>{{ key.toUpperCase() }}</span>
                                <el-button circle size='small' :type="data ? 'success' : 'info'" style="margin-left: 5px;"
                                    @click="item.data[key] = !item.data[key]" />
                            </el-col>
                        </el-row>
                        <io_select v-if="key == 'io_map'" :label='item.label' v-model:io_config="item.data[key]"
                            :max="io_max" :selected="io_selected" />
                    </div>
                </div>
                <el-text v-else type="info">未开启功能</el-text>
            </ElDescriptionsItem>
        </el-descriptions>
        <el-button :disabled="!io_config_change" @click="save" type="primary" style="margin-top: 10px;">保存</el-button>
    </el-collapse-item>
</template>
<script setup lang="ts">
import io_select from './io_select.vue';
import { cloneDeep, isEqual } from "lodash-es"
import Bus from "~/utils/bus";
import tools from "~/utils/tools";
const props = defineProps({
    io_config: {
        type: Object,
        default: {
            uart: [],
            i2c: [],
            spi: [],
            dap: []
        }
    },
    io_max: {
        type: Number,
        default: 0
    }
})
let source_config = cloneDeep(props.io_config)
const io_config_change = ref(false)
interface Config {
    io_map: { [key: string]: number },
    enable: boolean

}
interface IoConfig {
    id: number | string,
    key: string
    label: string
    data: Config
}
const io_configs = reactive<Array<IoConfig>>([])
const emits = defineEmits(['update:io_config'])
watchEffect(() => {
    io_configs.splice(0, io_configs.length)
    for (let label in props.io_config) {
        for (let index in props.io_config[label])
            io_configs.push({ id: index, key: label, label: label.toUpperCase() + index, data: props.io_config[label][index] })
    }
    // console.log(io_configs)
})
const io_selected = computed(() => {
    let res = []
    let updates: { [key: string]: Array<Config> } = {}
    io_config_change.value = false
    for (let index in io_configs) {
        const item = io_configs[index]
        for (let key in item.data.io_map) {
            if (item.data.io_map[key] != -1) {
                res.push({ io: item.data.io_map[key], label: item.label, color: tools.get_type_color(item.label) })
            }
        }
        for (let key in item.data.gpio) {
            if (item.data.gpio[key] != -1) {
                res.push({ io: item.data.gpio[key], label: item.label, color: tools.get_type_color(item.label) })
            }
        }
        if (!updates[item.key])
            updates[item.key] = [];
        updates[item.key][item.id] = item.data;
    }
    if (!isEqual(updates, source_config)) {
        io_config_change.value = true
        emits('update:io_config', updates) // 更新 io_config 到父组件
    }
    return res
})

const save = () => {
    Bus.emit('push.msg', { api: "set_config_io", data: props.io_config })
}

</script>
<style scoped>
.io_config_label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-col {
    justify-content: space-between;
}

.io_config_input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.el-tag {
    min-width: 60px;
    font-size: 1em;
}

.io_config_input>div {
    width: 65%;
}
</style>